<template>
    <view class="content">
        <!-- 订单确认弹窗 -->
        <uv-popup ref="popup">
            <view class="px-40">
                <view class="fw-800 text-center py-20">
                    <text v-if="selectedData.orderStatus==3">订单详情</text>
                    <text v-else>订单确认</text>
                </view>
                <uv-form label-width="100" label-align="right">
                    <uv-form-item label="是否有车：">
                        <view>{{selectedData.ownCarFlag=="0"?'无':'有'}}</view>
                    </uv-form-item>
                    <uv-form-item label="接送地址：">
                        <view>{{selectedData.address}}</view>
                    </uv-form-item>
                    <uv-form-item label="接送时间：">
                        <view>{{selectedData.transferTime}}</view>
                    </uv-form-item>
                    <uv-form-item label="练车时长：">
                        <view>{{selectedData.durationHours}}小时</view>
                    </uv-form-item>
                    <uv-form-item label="首付金额：">
                        <view>{{selectedData.firstPayMoney}}元</view>
                    </uv-form-item>
                    <uv-form-item label="尾款金额：">
                        <view>{{selectedData.finalPayMoney}}元</view>
                    </uv-form-item>
                    <uv-form-item label="订单总金额：">
                        <view>{{selectedData.orderMoney}}元</view>
                    </uv-form-item>
                    <!-- 教练信息展示 -->
                    <view v-if="selectedData.orderStatus==2||selectedData.orderStatus==3">
                        <uv-form-item label="接单教练：">
                            <view>{{selectedData.coachName}}</view>
                        </uv-form-item>
                        <uv-form-item label="教练电话：">
                            <view @click="callPhone(selectedData.coachPhoneNum)">{{selectedData.coachPhoneNum}}</view>
                        </uv-form-item>
                    </view>
                </uv-form>
                <view class="py-20 pb-30">
                    <uv-button type="primary" @click="payFirstMoney" v-if="selectedData.orderStatus==0"
                        :loading="showLoading" loading-text="支付中，请稍等">支付首付款</uv-button>
                    <uv-button type="primary" @click="payFinalMoney" v-if="selectedData.orderStatus==2"
                        :loading="showLoading" loading-text="支付中，请稍等">支付尾款</uv-button>
                </view>
            </view>
        </uv-popup>
        <uv-cell-group>
            <uv-cell :title="list.address +'（'+list.transferTime+'）'"
                :label="'约驾时长：'+list.durationHours+'小时'+' ， 是否有车：'+(list.ownCarFlag==1?'有':'无')" v-for="list in lists">
                <template v-slot:value>
                    <uv-button type="primary" @click="pay(list)">
                        <text v-show="list.orderStatus==0">支付预约费用</text>
                        <text v-show="list.orderStatus==1">预约费用已支付</text>
                        <text v-show="list.orderStatus==2">支付尾款</text>
                        <text v-show="list.orderStatus==3">尾款已支付</text>
                    </uv-button>
                </template>
            </uv-cell>
        </uv-cell-group>
        <uv-load-more @loadmore="loadMore" :status="status"></uv-load-more>
    </view>
</template>

<script setup lang="ts">
    import { getOrderList, getMobileWxPay, getFinalMobileWxPay } from "@/src/api/index.ts"
    import { onMounted, ref } from 'vue';
    import { onPullDownRefresh } from "@dcloudio/uni-app";
    import { useAuthStore } from '../../stores/auth';
    const lists = ref([]);
    const status = ref('loadmore');
    //页码
    const pageSize = ref(10);
    //刷新
    onPullDownRefresh(() => {
        pageSize.value = 10;
        getPage();
        uni.stopPullDownRefresh();

    })
    onMounted(() => {
        //{orderStatus:}
        getPage();

    })
    const popup = ref(null);

    const getPage = () => {
        getOrderList({ pageNo: 1, pageSize: pageSize.value }).then(res => {
            lists.value = res.result.records;
            //判断分页是否结束
            if (pageSize.value >= res.result.total) {
                status.value = 'nomore'
            }
        })
    }
    //分页查询
    const loadMore = () => {
        pageSize.value += 10;
        // status.value = 'loading '
        getPage();
        console.log('2323')
    }
    const selectedData = ref('');
    const pay = (selected) => {
        selectedData.value = selected;
        if (selected.orderStatus == 0 || selected.orderStatus == 2) {
            popup.value.open();
        }
        if (selected.orderStatus == 1) {
            uni.showToast({
                icon: "none",
                title: "首付款已支付，等待教练接单"
            })
        }
        if (selected.orderStatus == 3) {
            popup.value.open();
        }
        // receiveOrder({ id: id }).then(res => {
        //     if (res.success) {
        //         uni.showToast({
        //             icon: "none",
        //             title: "接单成功"
        //         })
        //     }
        // })
    }
    const callPhone=(phone)=>{
        uni.makePhoneCall({
            phoneNumber:phone
        })
    }
    const showLoading = ref(false);
    //支付首付款
    const payFirstMoney = () => {
        showLoading.value = true;
        getMobileWxPay({ id: selectedData.value.id, openId: useAuthStore().userInfo.openId }).then(res => {
            if (res.success) {
                uni.requestOrderPayment({
                    provider: "wxpay",
                    ...res.result,
                    package: res.result.packageValue,
                    success: (r) => {
                        uni.showToast({
                            icon: "none",
                            title: "支付成功"
                        })
                        showLoading.value = false;
                        //更改订单状态
                        selectedData.value.orderStatus = 1;
                        //关闭弹窗
                        popup.value.close();
                    },
                    fail: (err) => {
                        console.log("fail:" + JSON.stringify(err));
                        showLoading.value = false;
                    },
                });
            }
        })
    }
    //支付尾款
    const payFinalMoney = () => {
        showLoading.value = true;
        getFinalMobileWxPay({ id: selectedData.value.id, openId: useAuthStore().userInfo.openId }).then(res => {
            if (res.success) {
                uni.requestOrderPayment({
                    provider: "wxpay",
                    ...res.result,
                    package: res.result.packageValue,
                    success: (r) => {
                        uni.showToast({
                            icon: "none",
                            title: "支付成功"
                        })
                        showLoading.value = false;
                        //更改订单状态
                        selectedData.value.orderStatus = 3;
                        //关闭弹窗
                        popup.value.close();
                    },
                    fail: (err) => {
                        console.log("fail:" + JSON.stringify(err));
                        showLoading.value = false;
                    },
                });
            }
        })
    }
</script>

<style>

</style>